<template>
  <div>
    <div ref="container" class="container" />
    <div class="node-item">
      <div class="node-item-icon bpmn-save" @click="saveNode()" />
      <span class="node-label">保存</span>
      <div class="node-item-icon " @click="cleanNode()"><svg-icon icon-class="edit" /></div>
      <span class="node-label">清空</span>
      <div class="node-item-icon bpmn-save" @click="reloadNode()" />
      <span class="node-label">加载</span>
      <div class="node-item-icon bpmn-save" @click="deleteNode()" />
      <span class="node-label">删除</span>
      <div class="node-item-icon bpmn-save" @click="getList()" />
      <span class="node-label">获取定义流程</span>
      <div class="node-item-icon bpmn-save" @click="flowRun()" />
      <span class="node-label">工作流实例</span>
    </div>
    <BpmnNodePanel :lf="lf" />
  </div>
</template>

<script>
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { BpmnElement, BpmnXmlAdapter, Menu, Snapshot } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'
import BpmnNodePanel from '../logicFlow/BpmnNodePanel.vue'
import { addFlow, infoFlow, deleteFlow, getDeployList, flowRun } from '@/api/tools/logicFlow/server'
import { addFlowable, addProp, getTypeNameByTag, setValueByTag } from '@/api/tools/logicFlow/xml'

export default {
  components: { BpmnNodePanel },
  data() {
    return {
      lf: void 0,
      xmlData: void 0,
      definitionsId: void 0,
      processId: void 0
    }
  },
  created() {},
  mounted() {
    this.loadFlow()
  },
  methods: {
    loadFlow() {
      LogicFlow.use(Snapshot)
      LogicFlow.use(BpmnElement)
      LogicFlow.use(BpmnXmlAdapter)
      LogicFlow.use(Menu)

      // 初始化
      this.lf = new LogicFlow({
        container: this.$refs.container,
        stopScrollGraph: true,
        stopZoomGraph: true,
        grid: true,
        background: {
          color: '#f7f9ff'
        },
        keyboard: {
          enabled: true
        }
      })
      // this.lf.setDefaultEdgeType('bezier')
      this.lf.render()
    },
    // 保存
    saveNode() {
      // 获取xml数据
      this.xmlData = this.lf.getGraphData()
      // 添加flowable扩展
      this.xmlData = addFlowable(this.xmlData)
      console.log(this.xmlData)
      // 判断是否为文档编辑
      if (this.processId) {
        // 修改为原流程id
        this.xmlData = setValueByTag(this.xmlData, 'bpmn:definitions', 'id', this.definitionsId)
        this.xmlData = setValueByTag(this.xmlData, 'bpmn:process', 'id', this.processId)
      } else {
        // 添加节点用户 个人assignee  候选人candidateUsers 候选组候选人candidateGroups 动态设置${employee}
        // this.xmlData = addProp(this.xmlData, 'bpmn:startEvent', 'flowable:candidateUsers', 'zhao,qian,sun')
        this.xmlData = addProp(this.xmlData, 'bpmn:userTask', 'flowable:candidateUsers', 'li,zhou,wang')
      }
      console.log(this.xmlData)
      const data = {
        name: '测试流程1',
        xml: this.xmlData
      }
      // 请求后台接口（添加工作流）
      addFlow(data)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 清除
    cleanNode() {
      this.lf.clearData()
    },
    // 重新加载
    reloadNode() {
      // 查询数据
      const data = {
        id: 'ff292b5d-4193-11ee-8e48-502b73dc5fce',
        name: '测试流程1'
      }
      infoFlow(data)
        .then(res => {
          if (res) {
            // 获取processId
            const definitionsNodes = getTypeNameByTag(res.result, 'bpmn:definitions')
            const processNodes = getTypeNameByTag(res.result, 'bpmn:process')
            this.definitionsId = definitionsNodes.id
            this.processId = processNodes.id
            // 渲染数据
            this.lf.render(res)
          }
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除数据
    deleteNode() {
      // 查询数据
      const data = {
        id: ''
      }
      deleteFlow(data)
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取数据
    getList() {
      getDeployList()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 流程实例
    flowRun() {
      flowRun()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style scoped>
.container {
  background-color: #4AB7BD;
  padding: 1px;
}
.node-item {
  position: absolute;
  top: 100px;
  left: 1600px;
  width: 50px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
}

.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 15px;
  background-size: cover;
}
.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.bpmn-save {
  background: url()
  no-repeat;
  cursor: grab;
}

.container {
  height: 750px;
}

</style>
